<template>
  <view class="policyItem">
    <view class="circular"></view>
    <view class="title">{{ policyInfo.policyName }}</view>
    <view class="valueLine public_flexBetween">
      <view class="valueItem public_flexBetween">
        <text class="text">保险金额</text>
        <view class="num"><text>￥</text>{{ policyInfo.insuranceAmount }}</view>
        <image class="leftLineBg" src="../../static/images/overview/leftLineBg1.png"></image>
      </view>
      <view class="valueItem public_flexBetween">
        <text class="text">现金价值</text>
        <view class="num"><text class="coin">￥</text>{{ policyInfo.cashValue }}</view>
        <image class="leftLineBg" src="../../static/images/overview/leftLineBg2.png"></image>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref, toRefs } from 'vue'

const props = defineProps({
  policyInfo: {
    type: Object,
    default: () => ({})
  }
})
const { policyInfo } = toRefs(props);
</script>

<style lang='scss' scoped>
.policyItem {
  position: relative;
  border-radius: 12px;
  padding: 28rpx 20rpx;
  background-color: #FFF;
  box-shadow: 0px 0px 20px 0px rgba(180, 148, 148, 0.21);

  // 右上角圆圈
  .circular {
    top: 12rpx;
    right: 12rpx;
    width: 16rpx;
    height: 16rpx;
    position: absolute;
    border-radius: 16rpx;
    background-color: #D9D9D9;
  }

  .title {
    font-weight: 500;
    margin-bottom: 24rpx;
  }

  .valueLine {
    .valueItem {
      width: 300rpx;
      height: 62rpx;
      position: relative;
      padding: 20rpx 24rpx;
      border-radius: 12rpx;
      background-color: #FFE4BF;

      .text {
        z-index: 2;
        font-size: 24rpx;
        color: #8A755C;
      }

      .num {
        font-weight: 500;
        color: #8A755C;

        .coin {
          font-size: 20rpx;
        }
      }

      &:last-child {
        background-color: #FFE8D9;

        .num {
          color: #E59E70;

          .coin {
            color: #E59E70;
          }
        }
      }

      // 背景图片
      .leftLineBg {
        top: 0;
        left: 0;
        z-index: 1;
        width: 154rpx;
        height: 62rpx;
        position: absolute;
      }
    }
  }
}
</style>